<div class="split" *ngIf="menu">
  <div class="area area-left">
    <div class="App__preview background--canvas flex-center">
      <div class="App__mobileview">
        <component-container [menu]="menu" [url]="'components'" class="container"></component-container>
      </div>
    </div>
  </div>
  <div class="area area-right">
    <div class="App__detail">
      <weui-navbar #navbar>
        <weui-tab heading="API">
          <section class="weui-article markdown">
            <h1>
              {{ item.meta.title }}
              <span *ngIf="item.meta.subtitle" class="subtitle">{{ item.meta.subtitle }}</span>
              <edit-button [item]="item"></edit-button>
            </h1>
            <div *ngIf="item.data.content" [innerHTML]="item.data.content"></div>
            <ng-container *ngIf="item.meta.module">
              <p>引用方式：</p>
              <pre
                class="typescript hljs"
              ><span class="hljs-section">import</span> &#123; <span class="hljs-attribute">{{item.meta.module}}</span> &#125; from <span class="hljs-string">'ngx-weui'</span>;</pre>
              <p *ngIf="item.meta.config">
                模块允许对<code>{{ item.meta.config }}</code
                ><a routerLink="/docs/config">全局配置</a>。
              </p>
            </ng-container>
            <div class="api-container" *ngIf="item.data.api" [innerHTML]="item.data.api"></div>
          </section>
        </weui-tab>
        <weui-tab heading="Sample Code" *ngIf="item.demo">
          <div class="weui-article">
            <weui-navbar (select)="changeCode()">
              <weui-tab heading="Typescript">
                <pre class="hljs language-typescript"><code [innerHTML]="item.demo.ts"></code></pre>
              </weui-tab>
              <weui-tab heading="HTML">
                <pre class="hljs language-html"><code [innerHTML]="item.demo.html"></code></pre>
              </weui-tab>
              <weui-tab heading="Scss">
                <pre class="hljs language-scss"><code [innerHTML]="item.demo.scss"></code></pre>
              </weui-tab>
            </weui-navbar>
          </div>
        </weui-tab>
      </weui-navbar>
    </div>
  </div>
</div>
